Day13！上一篇我們用 TailwindCSS 切版出了還不錯看的部落格首頁，顯示文章列表。今天讓我們乘勝追擊，繼續切版文章內頁樣式。

文章內頁就比較有趣了，因為我們是用 WPGraphQL 的 GraphQL API 抓取文章內容下來，文章內容要從 post > content 欄位抓下來，抓取下來格式會是 String，裡面會包含一大坨內文 HTML string，內容範例如下（擷取自 cms-wordpress demo site）：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit hoc ultimum bonorum, quod nunc a me defenditur; <a href="https://nextjs.org">Vitae autem degendae</a> ratio maxime quidem illis placuit quieta. Duo Reges: constructio interrete. Nam quid possumus facere melius?</p>
<div class="wp-block-buttons">
<div class="wp-block-button"><a class="wp-block-button__link">This is a button block</a></div>
</div>
<p>Left aligned paragraph. <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid dubitas igitur mutare principia naturae?</strong> Ita multo sanguine profuso in laetitia et in victoria est mortuus. Omnia contraria, quos etiam insanos esse vultis. <s>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam.</s> Quis non odit sordidos, vanos, leves, futtiles? Quasi ego id curem, quid ille aiat aut neget. </p>
<p class="has-text-align-center">Center aligned parapgrah. Duo enim genera quae erant, fe...

依照後台編輯器用到的區塊和設定的格式，內文會出現各式各樣 html 像是 h2、h3、p、div、img 等等，並且也包含 WordPress 內建的 wp-block-button、has-text-align-center 等 class，對應特定內文 block 或樣式設定。

這部分 Next.js 前端就沒有太大控制權，必須配合 WordPress 吐回來的 html，觀察會出現哪些 html element 和 class，來給予樣式。

幸好 Next.js 官方的 cms-wordpress 範例已經幫我們實作好這部分了，其中 post-body.module.css 和 index.css 這兩支檔案已經幫我們列出最常見會出現的 WordPress html element 和 class，並設定好還不錯的樣式了，我們可以基於這兩支檔案修改出理想內文樣式。

實務上建議處理內文樣式時，先在 WordPress 建立一篇範例文章，將你們網站會出現的所有內文元素都加到裡面，包含各類 block、文字和圖片的置左置中置右和各級大小、粗體斜體、連結、項目列表等等，之後再切版時就用 Next.js 抓取這篇文章實際 content 來核對，看樣式是否都有涵蓋到。